<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>key原理</title></title>
        <script type="text/javascript" src="../js/vue.js"></script>
        
    </head>
    <body>
        <div id="root">
            <button @click.once="add">反转</button>
            <!-- key一定要有, 而且要唯一 -->
            <h2>遍历数组, key使用index</h2>
            <ul>
                <!-- 如果使用index 作为key, 当数据发生变化时, 可能发会发生数据错乱, 这也是默认行为, 
                    所以一般一定要手动指定业务数据唯一标识作为唯一key, 
                    原理就是虚拟dom对比时, 使用的关键信息就是key , 如果确定不会发生变化, 或者不会对改变原数据的index. 使用idx也么有关系-->
                <li v-for="(p,idx) in persons" :key="idx">
                    {{p.name}} - {{p.age}} -- <input type="text">
                </li>
            </ul>

            <h2>遍历数组, key使用业务数据唯一标识</h2>
            <ul>
                <li v-for="p in persons" :key="p.id">
                    {{p.name}} - {{p.age}} -- <input type="text">
                </li>
            </ul>

        </div>
    </body>
    <script>
        const vm = new Vue({
            el: "#root",
            data:{
                persons:[
                    {id:1, name: '张三', age: 18},
                    {id:2, name: '李四', age: 19},
                    {id:3, name: '王五', age: 20},
                ]
            },
            methods: {
                add(){
                    this.persons.unshift({'id': 4, 'name': '赵六', 'age': 21})
                }
            },
        })
    </script>
</html>